<template>
    <div class="category">
   <h1> 分类  promise</h1>
   <div > 
    <!-- <button :class="{active: tabIndex === index }" v-for="(item,index) in listData" :key="index" 
    @click="toggleTab(index,item.name)"> {{item.title}}</button> -->
    <!-- 分类组件的三级路由插座 -->
    <router-view></router-view>
   </div>
    </div>
</template>

<script>
    export default {
        name:"Category",
        data(){
            return{
                listData:[
                    {title:"推荐",name:'Tuijian'},
                    {title:"手机",name:'Shouji'},
                ],
                tabIndex : 0
            };
        },

        created(){
            // console.log("category this.$route==>",this.$route);
            for (let i = 0; i < this.listData.length; i++) {
              if (this.$route.name === this.listData[i].name) {
                this.tabIndex = i;
                break;
              }
                
            }
        },

        methods:{
            toggleTab(index, name){
               if (this.tabIndex === index) {
                  return;
               }

               this.tabIndex = index;
               this.$router.push(name)
            //    this.$router.push({name})
            }
        }
    }
</script>

<style lang="less" scoped>
     button.active{
        background-color:#e4393c ;
     }
</style>